<template>
  <div class="s-card">
    <div style="padding: 16px">
      <p class="s-card-title">{{ $t('operator.login_time1') }}</p>
      <div class="flex justify-between">
        <div class="s-card-label"> {{statisticValue}}</div>
        <div style="width: 60%">
          <progress-chart ref="progressChart" />
        </div>
      </div>
      <!-- <div class="flex" style="padding-top:4px;font-size: 14px;line-height: 20px;">
        <div class="percent-tag"> {{ getPercent }}</div>
        <div style="color: #677788; margin-left: 8px;">From {{ allDevice }}</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import {
  getOperatorActivityCurMonth
} from '@/api/operator'
import progressChart from './login-progress-chart.vue'
export default {
  components: { progressChart },
  data() {
    return {
      statisticValue: 0,
      params: {
        dateUnit: 'day',
        dateRange: '7'
      },
      onlineData: []
    }
  },
  mounted() {
    this.getOperatorActivityCurMonth()
  },
  methods: {
    getOperatorActivityCurMonth() {
      getOperatorActivityCurMonth(this.$route.params.operatorId)
        .then((res) => {
          this.statisticValue = res.statisticValue ? res.statisticValue : 0
        })
        .catch(this.$confirmError)
    }
    
  }
}
</script>
<style lang="scss" scoped>
.s-card {
  width: 381px;
  background: #ffffff;
  border: 1px solid #eef0f7;
  box-shadow: 0px 0px 21px 0px rgba(19, 33, 68, 0.08);
  border-radius: 12px;
  margin: 16px;
  .s-card-title {
    font-size: 14px;

    font-weight: 600;
    color: #93a0aa;
    line-height: 26px;
  }
  .s-card-label {
    font-size: 24px;
    line-height: 40px;
    font-weight: 600;
    color: #1e2022;
  }
}

.percent-tag {
  background: #e5f9f6;
  border-radius: 6px;
  color: #37c3b0;
  text-align: center;
  padding: 0 6px;
}
</style>
